<template>
  <div class="table-box">
    <div class="table-header">
      <el-form
        label-width="80px"
        :inline="true"
        :model="data"
        class="form-inline"
      >
        <el-form-item
          class="table-form-item"
          label="机车号"
        >
          <el-input
            :readonly="true"
            v-model="data.cabNum"
            size="mini"
          />
        </el-form-item>
        <el-form-item
          class="table-form-item"
          label="司机号"
        >
          <el-input
            :readonly="true"
            v-model="data.driverNum"
            size="mini"
          />
        </el-form-item>
        <el-form-item
          class="table-form-item"
          label="司机"
        >
          <el-input
            :readonly="true"
            v-model="data.driverName"
            size="mini"
          />
        </el-form-item>
        <el-form-item
          class="table-form-item"
          label="副司机"
        >
          <el-input
            :readonly="true"
            v-model="data.driverName"
            size="mini"
          />
        </el-form-item>
        <el-form-item
          class="table-form-item"
          label="日期"
        >
          <el-input
            :readonly="true"
            v-model="data.date"
            size="mini"
          />
        </el-form-item>
        <el-form-item
          class="table-form-item"
          label="文件数"
        >
          <el-input
            :readonly="true"
            v-model="data.fileNum"
            size="mini"
          />
        </el-form-item>
        <el-form-item
          class="table-form-item"
          label="总行数"
        >
          <el-input
            :readonly="true"
            :value="list.length"
            size="mini"
          />
        </el-form-item>
        <el-form-item
          class="table-form-item"
          style="width: 90%;"
          label="文件路径"
        >
          <el-input
            :readonly="true"
            v-model="data.dir"
            size="mini"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content">
      <el-table
        :data="list"
        border
        height="428"
        size="mini"
      >
        <el-table-column
          label="序号"
          prop="alarmNo"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          label="事件"
          prop="eventItem"
          show-overflow-tooltip
        />
        <el-table-column
          label="时间"
          prop="timeText"
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'

@Component
export default class AlarmInfoTable extends Vue {
  @Prop({
    type: Object,
    default: () => {
      return {}
    }
  })
  data!: any

  @Prop({
    type: Array,
    default: () => {
      return []
    }
  })
  list!: any[]

  // 总文件大小
  get totalSize() {
    const size = this.list.reduce((result: number, video: any) => result + video.size, 0)
    return size
  }
}
</script>

<style lang="scss" scoped>
.table-box::-webkit-scrollbar {
  display: none;
}
.table-box {
  height: 100%;
  overflow: scroll;
  .table-header {
    height: 15%;
    overflow: scroll;
    .table-form-item {
      margin-bottom: 5px;
      margin-right: 0;
      /deep/.el-form-item__content {
        width: calc(100% - 80px);
      }
    }
  }
  .table-header::-webkit-scrollbar {
    display: none;
  }
  .table-content {
    height: 85%;
  }
}
</style>
